import React, { useState, useEffect } from 'react'
import './style/Chart1.scss'
// import style from './Animalmanagement.module.css'
import * as echarts from "echarts";
// const Chart1 = forwardRef((props, ref) => {
export default function Chart1() {
    const [infodata, setdata] = useState([])
    const getdata = () => {
        // setdata(ref)

    }

    const drawbar = () => {


        var myChart = echarts.init(document.getElementById("Chart1_barli"));
        var option = {
            // backgroundColor: "#040D36",
            title: {
                text: "2023年天气灾害占比总量",
                textStyle: {
                    color: "#fff",
                    fontSize: "15",
                    fontWeight: "bolder",
                },
                subtextStyle: {
                    fontSize: 20
                }
            },
            tooltip: {
                trigger: "item",
                formatter: "{b}:{c} ({d}%)",
            },
            series: [
                {
                    type: "pie",
                    zlevel: 1,
                    silent: true,
                    radius: ["59%", "60%"],
                    label: {
                        normal: {
                            show: false,
                        },
                    },
                    labelLine: {
                        normal: {
                            show: false,
                        },
                    },
                    data: _pie(),
                },
                {
                    type: "pie",
                    zlevel: 2,
                    silent: true,
                    radius: ["44%", "45%"],
                    label: {
                        normal: {
                            show: false,
                        },
                    },
                    labelLine: {
                        normal: {
                            show: false,
                        },
                    },
                    data: _pie(),
                },
                {
                    type: "pie",
                    zlevel: 3,
                    silent: true,
                    radius: ["29%", "30%"],
                    label: {
                        normal: {
                            show: false,
                        },
                    },
                    labelLine: {
                        normal: {
                            show: false,
                        },
                    },
                    data: _pie(),
                },
                {
                    type: "pie",
                    zlevel: 4,
                    silent: true,
                    radius: ["14%", "15%"],
                    label: {
                        normal: {
                            show: false,
                        },
                    },
                    labelLine: {
                        normal: {
                            show: false,
                        },
                    },
                    data: _pie(),
                },
                {
                    type: "pie",
                    zlevel: 5,
                    radius: ["14%", "60%"],
                    center: ["50%", "50%"],
                    roseType: "area",
                    data: [
                        {
                            name: "暴雨洪水",
                            value: "620",
                            itemStyle: {
                                normal: {
                                    color: "rgba(255, 155, 92, 0.5)",
                                    borderColor: "rgba(255, 155, 92, 1)",
                                    borderWidth: 1,
                                },
                            },
                        },
                        {
                            name: "台风",
                            value: "580",
                            itemStyle: {
                                normal: {
                                    color: "rgba(36, 180, 255, 0.5)",
                                    borderColor: "rgba(36, 180, 255, 1)",
                                    borderWidth: 1,
                                },
                            },
                        },
                        {
                            name: "龙卷风",
                            value: "500",
                            itemStyle: {
                                normal: {
                                    color: "rgba(255, 201, 92, 0.5)",
                                    borderColor: "rgba(255, 201, 92, 1)",
                                    borderWidth: 1,
                                },
                            },
                        },
                        {
                            name: "雪灾",
                            value: "109",
                            itemStyle: {
                                normal: {
                                    color: "rgba(244, 255, 77, 0.5)",
                                    borderColor: "rgba(244, 255, 77, 1)",
                                    borderWidth: 1,
                                },
                            },
                        },
                        {
                            name: "高温热浪",
                            value: "424",
                            itemStyle: {
                                normal: {
                                    color: "rgba(115, 244, 64, 0.5)",
                                    borderColor: "rgba(115, 244, 64, 1)",
                                    borderWidth: 1,
                                },
                            },
                        },
                        {
                            name: "冰雹",
                            value: "424",
                            itemStyle: {
                                normal: {
                                    color: "rgba(115, 44, 64, 0.5)",
                                    borderColor: "rgba(115, 244, 64, 1)",
                                    borderWidth: 1,
                                },
                            },
                        },
                    ],
                    label: {
                        normal: {
                            color: "#88A8D6",
                        },
                    },
                    labelLine: {
                        normal: {
                            length2: 30,
                            lineStyle: {
                                color: "#88A8D6",
                            },
                        },
                    },
                },
                {
                    type: "gauge",
                    zlevel: 5,
                    splitNumber: 90,
                    radius: "69%",
                    center: ["50%", "50%"],
                    startAngle: 90,
                    endAngle: -269.9999,
                    axisLine: {
                        show: false,
                    },
                    axisTick: {
                        show: false,
                    },
                    axisLabel: {
                        show: false,
                    },
                    splitLine: {
                        show: true,
                        length: 10,
                        lineStyle: {
                            width: 4,
                            color: "#132F8A",
                        },
                    },
                    pointer: {
                        show: 0,
                    },
                    detail: {
                        show: 0,
                    },
                },
                {
                    type: "pie",
                    zlevel: 6,
                    silent: true,
                    radius: ["72%", "73%"],
                    color: ["#041B4F", "#172F6C", "#041B4F", "#172F6C"],
                    hoverAnimation: false,
                    label: {
                        normal: {
                            show: false,
                        },
                    },
                    data: [1, 1, 1, 1],
                },
                {
                    type: "pie",
                    zlevel: 7,
                    silent: true,
                    radius: ["77%", "80%"],
                    hoverAnimation: false,
                    color: [
                        {
                            type: "linear",
                            colorStops: [
                                {
                                    offset: 0,
                                    color: "rgba(6,15,56,0)",
                                },
                                {
                                    offset: 1,
                                    color: "rgba(18,52,133,1)",
                                },
                            ],
                            global: false,
                        },
                        {
                            type: "linear",
                            colorStops: [
                                {
                                    offset: 0,
                                    color: "rgba(6,15,56,0)",
                                },
                                {
                                    offset: 1,
                                    color: "rgba(18,52,133,1)",
                                },
                            ],
                            global: false,
                        },
                        {
                            type: "linear",
                            colorStops: [
                                {
                                    offset: 0,
                                    color: "rgba(6,15,56,0)",
                                },
                                {
                                    offset: 1,
                                    color: "rgba(18,52,133,1)",
                                },
                            ],
                            global: false,
                        },
                    ],
                    label: {
                        normal: {
                            show: false,
                        },
                    },
                    labelLine: {
                        normal: {
                            show: false,
                        },
                    },
                    data: [1, 1, 1],
                },
            ],
        };

        function _pie() {
            let dataArr = [];
            for (var i = 0; i < 100; i++) {
                if (i % 2 === 0) {
                    dataArr.push({
                        name: (i + 1).toString(),
                        value: 25,
                        itemStyle: {
                            normal: {
                                color: "rgb(3,56,92)",
                                borderWidth: 0,
                                borderColor: "rgba(0,0,0,0)",
                            },
                        },
                    });
                } else {
                    dataArr.push({
                        name: (i + 1).toString(),
                        value: 20,
                        itemStyle: {
                            normal: {
                                color: "rgba(0,0,0,0)",
                                borderWidth: 0,
                                borderColor: "rgba(0,0,0,0)",
                            },
                        },
                    });
                }
            }
            return dataArr;
        }


        myChart.setOption(option)

        // console.log(timer);
        window.onresize = () => {
            myChart.resize();
        }

    }
    const drawbar2 = () => {
        const yData = [1232, 1452, 1567, 1783, 2020]

        var myChart = echarts.init(document.getElementById("Chart1_barli2"));
        var option = {
            // backgroundColor: 'rgba(0, 55, 107)',
            title: {
                text: "历年降雨总量",
                // subtext: "Sub Title",
                left: "left",
                top: "top",
                textStyle: {
                    fontSize: "15",
                    color: "rgba(252, 252, 252, 1)"
                },
                subtextStyle: {
                    fontSize: 20
                }
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            legend: {
                icon: 'stack',
                itemWidth: 10,
                itemHeight: 5,
                textStyle: {
                    fontSize: 14,
                    color: '#e0e1e2', // 设置字体颜色
                    padding: [10, 10] // 设置文字与图例的距离
                },
                itemGap: 20,// 设置图例项之间的间距
                itemStyle: {
                    borderWidth: 0
                }
            },
            grid: {
                bottom: '8%',
                left: '4%',
                right: '4%',
                containLabel: true
            },
            xAxis: {
                data: ['2019年', '2020年', '2021年', '2022年', '2023年'],
                axisTick: {
                    show: false
                },
                axisLabel: {
                    interval: 1,
                    color: 'rgba(255,255,255)', //更改坐标轴文字颜色
                    fontSize: 12, //更改坐标轴文字大小
                    margin: 20
                },
            },
            yAxis: [
                {
                    // name: '温度',
                    type: 'value',
                    min: "0",
                    // max: 100,
                    splitLine: {
                        show: false
                    },
                    splitLine: {
                        interval: 0,
                        show: true, // 开启分割线
                        lineStyle: {
                            color: 'rgba(6, 88, 142)',
                            width: 2,
                            type: [6, 3],
                        },
                    },
                    axisTick: {
                        show: false
                    },
                    axisLine: {
                        show: false
                    },
                    axisLabel: {
                        color: 'rgba(207, 219, 230)'
                    },
                    position: 'left',
                }
            ],
            series: {
                name: '降雨总量',
                type: 'bar',
                barWidth: '20%',
                itemStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                            offset: 0,
                            color: 'rgba(84,115,232,1)'
                        },
                        {
                            offset: 1,
                            color: 'rgba(24,144,255,0.6)'
                        }
                    ])
                    // shadowColor: '#3C97F2',
                    // shadowBlur: 5,
                },
                label: {
                    normal: {
                        show: true,
                        position: 'top',
                        fontSize: 12
                    }
                },
                data: yData
            }
        }
        myChart.setOption(option)

        // console.log(timer);
        window.onresize = () => {
            myChart.resize();
        }

    }
    const drawbar3 = () => {

        const time = ['2023-1', '2023-2', '2023-3', '2023-4', '2023-5', '2023-6', '2023-7', '2023-8']
        const data = [
            { name: '降雨', data: [100, 200, 300, 400, 500, 600, 500, 600] },
            { name: '湿度', data: [200, 300, 400, 33, 200, 500, 700, 800] },
        ]
        var myChart = echarts.init(document.getElementById("Chart1_barl3"));
        var option = {
            // backgroundColor: 'rgba(0, 55, 107)',
            color: ['rgba(28, 205, 255)', 'rgba(47, 255, 208)'],
            title: {
                text: "2023年降雨与湿度",
                // subtext: "Sub Title",
                left: "left",
                top: "top",
                textStyle: {
                    fontSize: "15",
                    color: "rgba(252, 252, 252, 1)"
                },
                // subtextStyle: {
                //     fontSize: 20
                // }
            },
            tooltip: {
                trigger: 'axis',
                borderWidth: 0,
                backgroundColor: 'rgba(1, 65, 122,0.5)',
                textStyle: { // 添加 textStyle 属性
                    color: '#fff' // 设置字体颜色
                },
                // valueFormatter: (params) => {
                //    return params + 'kg'
                // }
                formatter: function (params) {
                    const time = params[0].name || ''
                    const before = params[0] || ''
                    const after = params[1] || ''
                    // 使用CSS样式来设置marker的形状为方形
                    const beforeMarkerStyle = 'display: inline-block; width: 5px; height: 14px; margin-right:3px; background-color: ' + before.color + ';';
                    const afterMarkerStyle = 'display: inline-block; width: 5px; height: 14px; margin-right:3px; background-color: ' + after.color + ';';
                    const beforeContent = before ? `${'<span style="' + beforeMarkerStyle + '"></span>'} 降雨: ${before.value ?? ''} ml <br />` : ''
                    const afterContent = after ? `${'<span style="' + afterMarkerStyle + '"></span>'} 湿度: ${after.value ?? ''} ml <br />` : ''
                    return `${time}<br/>${beforeContent}${afterContent}`
                },
            },
            legend: {
                icon: 'stack',
                itemWidth: 10,
                itemHeight: 5,
                textStyle: {
                    fontSize: 14,
                    color: '#e0e1e2', // 设置字体颜色
                    padding: [10, 10] // 设置文字与图例的距离
                },
                itemGap: 20,// 设置图例项之间的间距
                itemStyle: {
                    borderWidth: 0
                }
            },
            grid: {
                left: '10%',
                right: '10%',
                bottom: '10%',
                top: '20%',
                containLabel: true,
            },
            xAxis: {
                type: 'category',
                boundaryGap: true,//两侧留白
                axisLine: {
                    lineStyle: {
                        color: 'rgba(2, 119, 175)',
                        width: 2,
                        type: 'solid',
                    },
                    show: true,
                    onZero: false // 将 x 轴坐标轴置于最低刻度上
                },
                axisPointer: {
                    type: 'line',
                    lineStyle: {
                        color: {
                            type: 'line',
                            x: 0,
                            y: 0,
                            x2: 1,
                            y2: 1,
                            colorStops: [{
                                offset: 0, color: 'rgba(38, 159, 193,.5)' // 100% 处的颜色
                            }, {
                                offset: 1, color: 'rgba(38, 159, 193,.5)' // 0% 处的颜色  #000613','#00334f', '#77f0ff'
                            }],
                        },
                        type: 'solid',
                        width: 24
                    },
                },
                axisLabel: {
                    interval: 1,
                    color: 'rgba(255,255,255)', //更改坐标轴文字颜色
                    fontSize: 12, //更改坐标轴文字大小
                    margin: 20
                },
                axisTick: {
                    show: true,
                    alignWithLabel: true,
                    lineStyle: {
                        color: 'rgba(2, 119, 175)', // 刻度线颜色
                        width: 2, // 刻度线宽度
                    },
                    length: 6, // 刻度线的长度
                },
                data: time,
            },
            yAxis: [
                {
                    // name: '温度',
                    type: 'value',
                    min: "0",
                    // max: 100,
                    splitLine: {
                        show: false
                    },
                    splitLine: {
                        interval: 0,
                        show: true, // 开启分割线
                        lineStyle: {
                            color: 'rgba(6, 88, 142)',
                            width: 2,
                            type: [6, 3],
                        },
                    },
                    axisTick: {
                        show: false
                    },
                    axisLine: {
                        show: false
                    },
                    axisLabel: {
                        color: 'rgba(207, 219, 230)'
                    },
                    position: 'left',
                }
            ],
            series: [{
                name: '降雨',
                type: 'line',
                symbol: 'circle',
                emphasis: {
                    focus: 'series',//高亮显示
                },
                symbolSize: 8,
                data: data[0].data,
                smooth: false,//曲线
                itemStyle: {
                    // 折线拐点标志的样式
                    borderColor: 'rgba(255,255,255)',
                    borderWidth: 2
                },
                // z: 2,
                areaStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(
                            0,
                            0,
                            0,
                            1,
                            [
                                {
                                    offset: 0,
                                    color: "rgba(23, 103, 144)"
                                },
                                {
                                    offset: 0.5,
                                    color: "rgba(29, 120, 159)"
                                },
                                {
                                    offset: 1,
                                    color: "rgba(2, 71, 135)"
                                }
                            ],
                        )
                    }
                }
            },
            {
                name: '湿度',
                type: 'line',
                symbol: 'circle',
                symbolSize: 8,
                data: data[1].data,
                smooth: false,//曲线
                itemStyle: {
                    //折线拐点标志的样式
                    borderColor: 'rgba(255,255,255)',
                    borderWidth: 2
                },
                emphasis: {
                    focus: 'series',//高亮显示
                },
                areaStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(
                            0,
                            0,
                            0,
                            1,
                            [
                                {
                                    offset: 0,
                                    color: "rgba(41, 122, 129)"
                                },
                                {
                                    offset: 0.5,
                                    color: "rgba(23, 97, 127)"
                                },
                                {
                                    offset: 1,
                                    color: "rgba(2, 71, 135)"
                                }
                            ],
                        )
                    }
                }
            },

            ]
        };
        myChart.setOption(option)

        // console.log(timer);
        window.onresize = () => {
            myChart.resize();
        }

    }
    const drawbar4 = () => {
        var xData = (function () {
            var data = [];
            for (var i = 2011; i < 2017; i++) {
                data.push(i + "年");
            }
            return data;
        })();
        var color = ["#1a9bfc", "#99da69", "#e32f46", "#7049f0", "#fa704d", "#01babc"];
        var name = [
            "暴雨洪水",
            "台风",
            "龙卷风",
            "雪灾",
            "高温热浪",
            "冰雹",
        ];
        var data = [
            [13.7, 3.4, 13.5, 16.1, 7.4, 15.2],
            [17.4, 13.7, 13.5, 3.4, 15.2, 13.5],
            [13.4, 7.4, 13.7, 13.5, 16.1, 13.7],
            [3.5, 15.2, 16.1, 17.4, 13.4, 6.1],
            [16.1, 13.5, 3.7, 17.4, 15.2, 18.9],
            [17.4, 6.1, 13.4, 15.2, 13.7, 5.2],
        ];

        var series = [];
        for (var i = 0; i < 6; i++) {
            series.push({
                name: name[i],
                type: "line",
                symbolSize: 3, //标记的大小，可以设置成诸如 10 这样单一的数字，也可以用数组分开表示宽和高，例如 [20, 10] 表示标记宽为20，高为10[ default: 4 ]
                symbol: "circle", //标记的图形。ECharts 提供的标记类型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
                smooth: true, //是否平滑曲线显示
                showSymbol: false, //是否显示 symbol, 如果 false 则只有在 tooltip hover 的时候显示
                areaStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(
                            0,
                            0,
                            0,
                            1,
                            [
                                {
                                    offset: 0,
                                    color: color[i],
                                },
                                {
                                    offset: 0.8,
                                    color: "rgba(255,255,255,0)",
                                },
                            ],
                            false
                        ),
                        // shadowColor: 'rgba(255,255,255, 0.1)',
                        shadowBlur: 10,
                        opacity: 0.3,
                    },
                },
                itemStyle: {
                    normal: {
                        color: color[i],
                        lineStyle: {
                            width: 1,
                            type: "solid", //'dotted'虚线 'solid'实线
                        },
                        borderColor: color[i], //图形的描边颜色。支持的格式同 color
                        borderWidth: 8, //描边线宽。为 0 时无描边。[ default: 0 ]
                        barBorderRadius: 0,
                        label: {
                            show: false,
                        },
                        opacity: 0.5,
                    },
                },
                data: data[i],
            });
        }

        var myChart = echarts.init(document.getElementById("Chart1_barli4"));
        var option = {
            // backgroundColor: "#141f56",
            legend: {
                top: 20,
                itemGap: 5,
                itemWidth: 5,
                textStyle: {
                    color: "#fff",
                    fontSize: 15,
                  
                },
                data: name,
            },
            title: {
                text: "历年天气灾害占比总量",
                textStyle: {
                    color: "#fff",
                    fontSize: "15",
                    fontWeight: "bolder",
                },
                subtextStyle: {
                    fontSize: 20
                }
            },
            tooltip: {
                trigger: "axis",
                axisPointer: {
                    // 坐标轴指示器，坐标轴触发有效
                    type: "line", // 默认为直线，可选为：'line' | 'shadow'
                    lineStyle: {
                        color: "#57617B",
                    },
                },
                formatter:
                    "{b}<br />{a0}: {c0}%<br />{a1}: {c1}%<br />{a2}: {c2}%<br />{a3}: {c3}%<br />{a4}: {c4}%<br />{a5}: {c5}%",
                backgroundColor: "rgba(0,0,0,0.7)", // 背景
                padding: [8, 10], //内边距
                extraCssText: "box-shadow: 0 0 3px rgba(255, 255, 255, 0.4);", //添加阴影
            },
            grid: {
                borderWidth: 0,
                top: 110,
                bottom: 95,
                textStyle: {
                    color: "#fff",
                },
            },
            xAxis: [
                {
                    type: "category",
                    axisLine: {
                        lineStyle: {
                            color: "#32346c",
                        },
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            color: "#32346c ",
                        },
                    },
                    boundaryGap: false, //坐标轴两边留白策略，类目轴和非类目轴的设置和表现不一样
                    axisTick: {
                        show: false,
                    },
                    splitArea: {
                        show: false,
                    },
                    axisLabel: {
                        inside: false,
                        textStyle: {
                            color: "#bac0c0",
                            fontWeight: "normal",
                            fontSize: "12",
                        },
                    },
                    data: xData,
                },
            ],
            yAxis: {
                type: "value",
                axisTick: {
                    show: false,
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: "#32346c",
                    },
                },
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: "#32346c ",
                    },
                },
                axisLabel: {
                    textStyle: {
                        color: "#bac0c0",
                        fontWeight: "normal",
                        fontSize: "12",
                    },
                    formatter: "{value}%",
                },
            },
            series: series
        }
        myChart.setOption(option)

        // console.log(timer);
        window.onresize = () => {
            myChart.resize();
        }

    }

    useEffect(() => {
        drawbar()
        drawbar2()
        drawbar3()
        drawbar4()
        console.log(infodata);
        getdata()

    }, [])
    // console.log(ref);
    return (
        <div className='chart_contant'>
            <div className='Chart1_showli'>
                {/* {drawlist()} */}
                <div id='Chart1_barli'></div>
                <div id='Chart1_barli2'></div>
                <div id='Chart1_barl3'></div>
            </div>
            <div className='Chart1_showli2'>
                {/* {drawlist()} */}
                <div id='Chart1_barli4'></div>
            </div>
        </div>
    )
    // })
}

// export default Chart1